#{extends 'mainPrivate.html' /}
#{set title:'Mes parcours' /}
#{set selectmesparcours :'active'/}

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="@{'/public/javascripts/mesParcours.js'}" type="text/javascript" charset="${_response_encoding}"></script>

<div class="ui tabular menu">
        <a class="active item" id="parcoursactuels">
            Mes futurs trajets
        </a>
        <a class="item" id="parcoursprecedents">
            Mes précédents trajets
    </a>
</div>
<div class="ui orange raised segment">
    <div id="affichageListeParcours">
    <div class="ui orange ribbon label">Mes trajets réservés</div>
    <div id="p_proposes">
    #{if lesParcoursChoisis}
        <table class="ui sortable table segment" >
            <thead>
            <tr>
                <th>Départ</th>
                <th>Arrivée</th>
                <th>Date et heure</th>
                <th>Prix</th>
                <th>Options</th>
            </tr>
            </thead>
            <tbody id="listeParcoursChoisis">
                #{list items:lesParcoursChoisis, as:'pchoisis'}
                    #{if pchoisis.dateParcours < new Date() }
                    #{/if}
                    #{else }
                    <tr>
                        <input type="hidden" name="pchoisisid" value="${pchoisis.id}">
                        <td><strong class='titre_parcour_mobile'>Départ: &nbsp;&nbsp;&nbsp;&nbsp;</strong>${pchoisis.depart.nom}</td>
                        <td><strong class='titre_parcour_mobile'>Arrivée: &nbsp;&nbsp;</strong>${pchoisis.arrivee.nom}</td>
                        <td>
                            <div class="ui divided list">
                                <div><strong class='titre_parcour_mobile'>Date: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>${pchoisis.dateParcours.format("dd/MM/yyyy")}</div>
                                <div><strong class='titre_parcour_mobile'>heure: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>${pchoisis.heure}h${pchoisis.min}</div>
                            </div>
                        </td>
                        <td><strong class='titre_parcour_mobile'>Prix: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>${pchoisis.prix}</td>
                        <td>
                            <div class="ui vertical buttons">
                                <div class='ui small blue button consulter'>
                                    <i class="unhide icon"></i>Consulter
                                </div>
                                #{if pchoisis.supprime}
                                    <div class='ui small negative disabled button'>
                                        <i class="warning users icon"></i>Annulé
                                    </div>
                                #{/if}
                                #{else }
                                    <div class='ui small positive button desinscrire'>
                                        <i class="remove icon"></i>Me désinscrire</div>
                                #{/else}
                            </div>
                        </td>
                    </tr>
                    #{/else}
                #{/list}
            </tbody>
            <tbody id="listeParcoursChoisis_2">
                #{list items:lesParcoursChoisis, as:'pchoisis'}
                    #{if pchoisis.dateParcours >= new Date() }
                    #{/if}
                    #{else }
                    <tr>
                        <input type="hidden" name="pchoisisid" value="${pchoisis.id}">
                        <td><strong class='titre_parcour_mobile'>Départ: &nbsp;&nbsp;&nbsp;&nbsp;</strong>${pchoisis.depart.nom}</td>
                        <td><strong class='titre_parcour_mobile'>Arrivée: &nbsp;&nbsp;</strong>${pchoisis.arrivee.nom}</td>
                        <td>
                            <div class="ui divided list">
                                <div><strong class='titre_parcour_mobile'>Date: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>${pchoisis.dateParcours.format("dd/MM/yyyy")}</div>
                                <div><strong class='titre_parcour_mobile'>heure: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>${pchoisis.heure}h${pchoisis.min}</div>
                            </div>
                        </td>
                        <td><strong class='titre_parcour_mobile'>Prix: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>${pchoisis.prix}</td>
                        <td>
                            <div class="ui vertical buttons">
                                <div class='ui small blue button consulter'>
                                    <i class="unhide icon"></i>Consulter
                                </div>
                                <div class='ui small negative disabled button'>
                                    <i class="warning users icon"></i>Effectué
                                </div>
                            </div>
                        </td>
                    </tr>
                    #{/else}
                #{/list}
            </tbody>
        </table>
    #{/if}
    #{else }
        Aucun parcours réservé
    #{/else}
    </div>
    <br/>
    <div class="ui orange ribbon label">Mes trajets proposés</div>
    <div id="p_crees">
    #{if lesParcoursCrees}
        <table class="ui sortable table segment" >
            <thead>
            <tr>
                <th>Départ</th>
                <th>Arrivée</th>
                <th>Date et heure</th>
                <th>Nombre de places restantes</th>
                <th>Prix</th>
                <th>Options</th>
            </tr>
            </thead>
            <tbody id="listeParcoursCrees">
                #{list items:lesParcoursCrees, as:'pcrees'}
                #{if pcrees.dateParcours < new Date() }
                #{/if}
                #{else }
                <tr>
                    <input type="hidden" name="pcreesid" value="${pcrees.id}"/>
                    <td><strong class='titre_parcour_mobile'>Départ: &nbsp;&nbsp;&nbsp;&nbsp;</strong>${pcrees.depart.nom}</td>
                    <td><strong class='titre_parcour_mobile'>Arrivée: &nbsp;&nbsp;</strong>${pcrees.arrivee.nom}</td>
                    <td>
                        <div class="ui divided list">
                            <div><strong class='titre_parcour_mobile'>Date: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>${pcrees.dateParcours.format("dd/MM/yyyy")}</div>
                            <div><strong class='titre_parcour_mobile'>heure: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>${pcrees.heure}h${pcrees.min}</div>
                        </div>
                    </td>
                    <td><strong class='titre_parcour_mobile'>Place: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>${pcrees.nbPlacesInitiales - pcrees.membresInscrits.size()}</td>
                    <td><strong class='titre_parcour_mobile'>Prix: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>${pcrees.prix}</td>
                    <td>
                        <div class="ui vertical buttons">
                            <div class='ui small blue button consulter'>
                                <i class="unhide icon"></i>Consulter
                            </div>
                            #{if !pcrees.supprime}
                                <div class='ui small purple button annuler'>
                                    <i class="remove icon"></i>Annuler
                                </div>
                            #{/if}
                            #{else }
                                <div class='ui small red button reactiver'>
                                    <i class="backward icon"></i>Réactiver
                                </div>
                            #{/else}
                        </div>
                    </td>
                </tr>
                #{/else}
                #{/list}
            </tbody>
            <tbody id="listeParcoursCrees_2">
                #{list items:lesParcoursCrees, as:'pcrees'}
                    #{if pcrees.dateParcours >= new Date() }
                    #{/if}
                    #{else }
                    <tr>
                        <input type="hidden" name="pcreesid" value="${pcrees.id}"/>
                        <td><strong class='titre_parcour_mobile'>Départ: &nbsp;&nbsp;&nbsp;&nbsp;</strong>${pcrees.depart.nom}</td>
                        <td><strong class='titre_parcour_mobile'>Arrivée: &nbsp;&nbsp;</strong>${pcrees.arrivee.nom}</td>
                        <td>
                            <div class="ui divided list">
                                <div><strong class='titre_parcour_mobile'>Date: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>${pcrees.dateParcours.format("dd/MM/yyyy")}</div>
                                <div><strong class='titre_parcour_mobile'>heure: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>${pcrees.heure}h${pcrees.min}</div>
                            </div>
                        </td>
                        <td><strong class='titre_parcour_mobile'>Place: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>${pcrees.nbPlacesInitiales - pcrees.membresInscrits.size()}</td>
                        <td><strong class='titre_parcour_mobile'>Prix: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>${pcrees.prix}</td>
                        <td>
                            <div class="ui vertical buttons">
                                <div class='ui small blue button consulter'>
                                    <i class="unhide icon"></i>Consulter
                                </div>
                                <div class='ui small negative disabled button'>
                                    <i class="warning users icon"></i>Effectué
                                </div>
                            </div>
                        </td>
                    </tr>
                    #{/else}
                #{/list}
            </tbody>
        </table>
    #{/if}
    #{else }
        Aucun parcours créé
    #{/else}
    </div>
    </div>
    <div id="affichageParcours" class="ui large modal"></div>
</div>
